<template>
    <div id="databaseSearch">
        <div>
            <p style="line-height: 30px; font-size: 12px;color: #666;">
                <i class="fa fa-search" aria-hidden="true" style="color:#81a9cc;text-indent: 10px;"></i>
                "{{showdata}}" 中
                <span style="color:red">{{searchInput}}</span>
                的搜索结果：
            </p>
        </div>
        <div v-loading="searchLoading" v-show="hasData">
            <el-table class="table"
                      ref="databasetable"
                      size="small"
                      :data="bigDataList"
                      v-loading="searchLoading"
                      element-loading-text="拼命加载中"
                      style='font-family:"宋体"'>
                <el-table-column prop="fileName" label="文件名">
                    <template slot-scope="scope">
                        <div class="folder-box"
                             v-if="scope.row.fileType == 1"
                             :class="scope.row.fileType == 1 ? 'is-file' :''"
                             @click="handleCellClick(scope.row)">
                            <span class="file-icon" :class="scope.row.fileIcon"></span>
                            <el-tooltip
                                    class="item"
                                    effect="dark"
                                    v-if="scope.row.fileName && abslength(scope.row.fileName) > 35"
                                    :content="scope.row.fileName"
                                    placement="top-start"
                            >
                                <span class="file-name">{{ scope.row.fileName.substring(0,$getFontShowLength(scope.row.fileName,35))+'...'}}</span>
                            </el-tooltip>
                            <span v-else class="file-name">{{scope.row.fileName}}</span>
                        </div>
                        <div v-else class="folder-box"
                             @click="handleCellClick(scope.row)"
                        >
                            <span class="file-icon" :class="scope.row.fileIcon"></span>
                            <el-tooltip
                                    class="item"
                                    effect="dark"
                                    v-if="scope.row.fileName && abslength(scope.row.fileName) > 35"
                                    :content="scope.row.fileName"
                                    placement="top-start"
                            >
                                <span class="file-name">{{ scope.row.fileName.substring(0,$getFontShowLength(scope.row.fileName,35))+'...'}}</span>
                            </el-tooltip>
                            <span v-else class="file-name">{{scope.row.fileName}}</span>
                            <span class="download-btn" @click.stop @click="downloadFile(scope.row)"><i class="fa fa-download" aria-hidden="true"></i></span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="dirName" label="目录">
                    <template slot-scope="scope">
                        <div class="folder-box" @click="handleCellClick(scope.row,true)">
                            <el-tooltip
                                    class="item"
                                    effect="dark"
                                    v-if="scope.row.dirName && abslength(scope.row.dirName)>35"
                                    :content="scope.row.dirName"
                                    placement="top-start"
                            >
                                <span class="name">{{ scope.row.dirName.substring(0,$getFontShowLength(scope.row.dirName,35))+'...'}}</span>
                            </el-tooltip>
                            <span class="name" v-else>{{scope.row.dirName}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建日期"></el-table-column>
                <el-table-column prop="updateTime" label="操作日期"></el-table-column>
                <el-table-column prop="size" label="大小" width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.fileType == 1">-</span>
                        <span v-else>{{scope.row.size}}</span>
                    </template>
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <div v-if="$store.state.zlkLoadingList.length>0&&$store.state.zlkLoadingList[0].id==scope.row.id">
                            <span>正在下载中：</span>
                            <el-progress :percentage='$store.state.zlkLoadingList[0].percentComplete' :show-text="true"></el-progress>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="display: flex;justify-content: center;margin-top:30px">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="bigdata1.page"
                        :page-sizes="[5,10,15]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="bigdata1.total">
                </el-pagination>
            </div>
        </div>
        <div v-show="!hasData"  v-loading="searchLoading" style="height:100%;width:100%;display: flex;margin-top:15%;align-items: center;flex-direction: column" >
            <img src="../../assets/img/search.png" alt="">
            <el-row style="font-size:18px;color:#B4B4B4;margin-top:9px;">暂无搜索结果</el-row>
            <el-row style="font-size:14px;color:#B4B4B4;margin-top:15px;">请更换新的名词重新尝试进行搜索</el-row>
        </div>
    </div>
</template>

<script>
  export default {
    name: "SearchList",
    props:["searchInput"],
    data(){
      return{
        showdata:"资料库",
        bigDataList:[],
        searchLoading:false,
        currentRow:10,
        currentPage:1,
        bigdata1:{},
        inputdata:"",
        companyId:0,
        hasData:true,
        departmentId:0,
        positionId:0,
        fileId:0,
      }
    },
    methods:{
      searchBigData(){
        this.bigDataList = [];
        this.searchLoading = true;
        // if(this.fileId != 0){
        //   this.companyId = 0;
        //   this.departmentId = 0;
        //   this.positionId = 0;
        // }else if(this.positionId != 0){
        //   this.companyId = 0;
        //   this.departmentId = 0;
        //   this.fileId = 0;
        // }else if(this.departmentId != 0){
        //   this.companyId = 0;
        //   this.positionId = 0;
        //   this.fileId = 0;
        // }
        // departmentId:this.departmentId,
        //   positionId:this.positionId,
        //   fileId:this.fileId,
        this.$http.post("/company/searchFile",{
          companyId:this.companyId,
          searchInfo:this.inputdata,
          page:this.currentPage,
          rows:this.currentRow,
        }).then(res=>{
            if(res.status == 200){
              let { data } = res;
              console.log(res)
              this.bigdata1 = {
                page:data.page,
                rows: data.rows,
                total: data.total
              };
              if(data.result==null){
                return;
              };
              if (data.result.length>0) {
                this.hasData = true;
                console.log(data.result)
                data.result.forEach((v, k) => {
                  let suffixTemp = v.fileName.split(".");
                  let file_icon
                  if (suffixTemp.length > 1) {
                    suffixTemp = suffixTemp[suffixTemp.length - 1];
                    file_icon = 'icon_list_' + suffixTemp
                  } else if (v.fileType === 0) {
                    suffixTemp = "";
                  } else {
                    suffixTemp = null;
                  }
                  let str = "";
                  if(v.dirName){
                    v.dirName.forEach(val=>{
                      str = str + val.name + '/'
                    })
                  }
                  this.bigDataList.push({
                    id: v.id,
                    dirId: v.dirId,
                    fileName: v.fileName,
                    peopleName: "暂无该字段",
                    size: v.fileSize == null ? "-" : this.$getFileSize(v.fileSize),
                    createTime: v.creatTime == null ? "暂无数据" : v.creatTime,
                    updateTime: v.updateTime == null ? v.creatTime : v.updateTime,
                    suffix: suffixTemp,
                    fileIcon: v.fileType == 1 ? 'icon_list_folder' : file_icon,
                    fileHash: v.fileHash,
                    fileType: v.fileType,
                    isFavorites:v.isFavorites,
                    dirName:str,
                    pathArray:v.dirName,
                    fileNameShow:this.getFontShowLength(v.fileName),
                    dirNameShow:this.getFontShowLength(str)
                  });
                  console.log("checkdata",this.bigDataList);
                });
              }else{
                this.hasData = false;
              }
              this.searchLoading = false;
            }else {
              this.hasData = false;
              this.searchLoading = false;
            }
        })
      },
      getFontShowLength(str){
        if(this.abslength(str)<=22){
          return str.length;
        }
        let tmp=0;
        let pattern = new RegExp("[\u4E00-\u9FA5]+");
        for(let i=0;i<str.length;i++){
          let a;
          if(pattern.test(str[i])==true){
            tmp+=2;
            a=-1;
          }else{
            tmp++;
            a=2;
          }
          if(tmp>22){
            console.log(i);
            return i;
          }
        }
      },
      handleCellClick(item,isword){
        this.$emit("handleCellClick",item,isword);
      },
      abslength( str ) {
        return str.replace(/[^\x00-\xff]/ig, '**').length;
      },
      downloadFile(file) {
       this.$emit("downloadFile",file)
      },
      handleSizeChange(val){
        this.currentRow = val;
        this.searchBigData()
      },
      handleCurrentChange(val){
        this.currentPage = val;
        this.searchBigData()
      },
    }
  }
</script>

<style scoped lang="scss">
    #databaseSearch{
        height: 100%;
        overflow-y: scroll;
        .el-pagination{
            padding-bottom:30px;
        }
    }
    .folder-box {
        display: flex;
        align-items: center;

        .download-btn{
            width: 30px;
            color: #549DE8;
        }
        .download-btn:hover{
            cursor: pointer;
        }
        .file-name{
            flex: 1;
            &:hover {
                text-decoration: underline;
                cursor: pointer;
            }
        }
        .name{
            &:hover {
                text-decoration: underline;
                cursor: pointer;
            }
        }
        .file-icon {
            background: url("/static/bigicon.png") no-repeat -196px 0px;
            display: inline-block;
            width: 28px;
            height: 29px;
            margin-right: 10px;
        }

        &.is-file {
            cursor: pointer;
        }


    }

</style>
